<template>
  <r-btn none :disabled="disabled" class="component-btn-countdown" @click="onClick">
    <r-countdown :on="on" @toggle="propagation">
      <template slot-scope="count">
        <template v-if="count.on">{{count.remain}}秒后重新获取</template>
        <template v-else>发送短信验证码</template>
      </template>
    </r-countdown>
  </r-btn>
</template>
<script>
import RBtn from './r-btn'
import RCountdown from './r-countdown'
export default {
  name: 'r-btn-countdown',
  model: {
    event: 'toggle',
    prop: 'on'
  },
  props: {
    on: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    }
  },
  components: {
    RBtn,
    RCountdown
  },
  methods: {
    propagation (on) {
      this.$emit('toggle', on)
    },
    onClick (event) {
      this.$emit('click', event)
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/var";

  .component-btn-countdown {
    width: 120px;
    color: $color-head;
  }
</style>
